<template>
  <div class="container">
    <div class="wrapper">
      <div
          style="position: absolute; left: 20px; top: 20px; display: flex; gap: 10px;"
      >
        <el-upload
            ref="upload"
            :limit="1"
            accept=".xlsx, .xls"
            :action="upload.url"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="true"
        >
          <el-button
              type="primary"
              size="small"
          >黑样本统计导入</el-button>
        </el-upload>
        <el-upload
            ref="SHGAuploadRef"
            :limit="1"
            accept=".xlsx, .xls"
            :action="SHGAupload.url"
            :disabled="SHGAupload.isUploading"
            :on-progress="handleSHGAFileUploadProgress"
            :on-success="handleSHGAFileSuccess"
            :auto-upload="true"
        >
          <el-button
              type="primary"
              size="small"
          >市局黑样本导入</el-button>
        </el-upload>

      </div>
      <!-- 头部标题 -->
      <h1 class="title">风险源站分析</h1>
      <!-- 主体内容网格布局 -->
      <div class="grid">
        <!-- 左侧列表 -->
        <div class="left-column">
          <!-- FAPK 列表 -->
          <div class="card">
            <h2 class="card-title big-title">
              <i class="fas fa-tv icon"></i>
              新增黑样本APK库
            </h2>
            <table class="custom-table">
              <thead>
              <tr>
                <th>应用名称</th>
                <th>应用包名</th>
                <th>涉诈类型</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item, index) in fapkList" :key="index">
                <td>{{ item.name }}</td>
                <td>{{ item.pkgName }}</td>
                <td>{{ item.type }}</td>
              </tr>
              </tbody>
            </table>
          </div>


          <!-- URL 列表 -->
<!--          <div class="card">-->
<!--            <h2 class="card-title big-title">-->
<!--              <i class="fas fa-link icon"></i>-->
<!--              新增反诈URL库-->
<!--            </h2>-->
<!--            <table class="custom-table">-->
<!--              <thead>-->
<!--              <tr>-->
<!--                <th>网站域名</th>-->
<!--                <th>网站IP</th>-->
<!--                <th>区域</th>-->
<!--              </tr>-->
<!--              </thead>-->
<!--              <tbody>-->
<!--              <tr v-for="(item, index) in urlList" :key="index">-->
<!--                <td>{{ item.domain }}</td>-->
<!--                <td>{{ item.ip }}</td>-->
<!--                <td>{{ item.region }}</td>-->
<!--              </tr>-->
<!--              </tbody>-->
<!--            </table>-->
<!--          </div>-->

          <!-- 市局数据模块 -->
          <div class="card">
            <div style="display: flex;align-items: center; gap: 60px;justify-content: space-between">
              <h2 class="card-title big-title">
                <i class="fas fa-shield-alt icon"></i>
                市局黑样本情况
              </h2>
              <el-date-picker
                style="width: 300px!important;flex: 1; margin-top: -5px; border: 1px solid #0a4b6e !important;"
                v-model="municipalDate"
                type="datetimerange"
                :value-format="'yyyy-MM-dd HH:mm:ss'"
                :format="'yyyy-MM-dd HH:mm:ss'"
                @change="getMunicipalCountList"
                range-separator="-"
                placeholder="请选择日期"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>
            <div class="municipal-stats">
              <div
                class="stat-item"
                v-for="(item, index) in municipalData"
                :key="'municipal-'+index"
              >
                <div class="stat-source">{{ item.data_source }}</div>
                <div class="stat-count">{{ item.original_count.toLocaleString() }}</div>
                <div class="stat-progress">
                  <div
                    class="progress-bar"
                    :style="{width: calculatePercentage(item.original_count, municipalData[0].original_count) + '%'}"
                  ></div>
                </div>
              </div>
            </div>
          </div>

          <!-- CERT数据模块 -->
          <div class="card">
            <div style="display: flex;align-items: center; gap: 60px;justify-content: space-between">
              <h2 class="card-title big-title">
                <i class="fas fa-globe icon"></i>
                CERT黑样本情况
              </h2>
              <el-date-picker
                style="width: 300px!important;flex: 1; margin-top: -5px; border: 1px solid #0a4b6e !important;"
                v-model="certDate"
                type="datetimerange"
                :value-format="'yyyy-MM-dd HH:mm:ss'"
                :format="'yyyy-MM-dd HH:mm:ss'"
                @change="getSampleCountListHandle"
                range-separator="-"
                placeholder="请选择日期"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>

            <div class="cert-stats">
              <div class="stat-grid">
                <div class="stat-item">
                  <span class="stat-label">原始数量</span>
                  <span class="stat-value" v-if="certData.original_count">{{ certData.original_count.toLocaleString() || 0 }}</span>
                </div>
                <div class="stat-item">
                  <span class="stat-label">覆盖数量</span>
                  <span class="stat-value" v-if="certData.cover_count">{{ certData.cover_count.toLocaleString() || 0 }}</span>
                </div>
                <div class="stat-item">
                  <span class="stat-label">新增数量</span>
                  <span class="stat-value" v-if="certData.add_count">{{ certData.add_count.toLocaleString() || 0 }}</span>
                </div>
                <div class="stat-item">
                  <span class="stat-label">存活数量</span>
                  <span class="stat-value" v-if="certData.live_count">{{ certData.live_count.toLocaleString() || 0 }}</span>
                </div>
              </div>
              <div ref="certChart" class="chart"></div>
            </div>
          </div>

        </div>
        <!-- 中间图表 -->
        <div class="middle-column">
          <!-- 风险类型分析饼图 -->
          <div class="card">
            <h2 class="card-title big-title">
              <i class="fas fa-chart-pie icon"></i>
              风险类型分析
            </h2>
            <div ref="pieChart" class="chart"></div>
          </div>
          <!-- 风险趋势图 -->
          <div class="card">
            <h2 class="card-title big-title">
              <i class="fas fa-chart-line icon"></i>
              风险数量趋势
            </h2>
            <div ref="lineChart" class="chart"></div>
          </div>
        </div>
        <!-- 右侧统计 -->
        <div class="right-column">
          <!-- 24小时风险分类统计 -->
          <div class="card">
            <h2 class="card-title big-title">
              <i class="fas fa-chart-bar icon"></i>
              24小时已处置的风险分类柱状图
            </h2>
            <div ref="bar24HChart" class="chart"></div>
          </div>
          <!-- 实时效果 -->
          <div class="card">
            <h2 class="card-title big-title">
              <i class="fas fa-clock icon"></i>
              干预实时效果
            </h2>
            <table class="custom-table">
              <thead>
              <tr>
                <th>网站域名</th>
                <th>区域</th>
                <th>干预次数</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item, index) in effectList" :key="index">
                <td>{{ item.domain }}</td>
                <td>{{ item.count }}</td>
                <td>{{ item.region }}</td>
              </tr>
              </tbody>
            </table>
          </div>
          <!-- 24小时风险分类统计 -->
          <div class="card">
            <h2 class="card-title big-title">
              <i class="fas fa-chart-bar icon"></i>
              24小时内风险用户的网络接入来源
            </h2>
            <div ref="barChart" class="chart"></div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import * as request from "@/utils/request/request";
import API from "@/api/index.api";
import moment from 'moment/moment';
export default {
  data() {
    return {
      municipalDate: [],
      certDate: [],
      certChart: null,
      SHGAupload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        /*  headers: { Authorization: "Bearer " + getToken() },*/
        // 上传的地址
        url: request.baseURL + "/list/importSample803"
      },
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        /*  headers: { Authorization: "Bearer " + getToken() },*/
        // 上传的地址
        url: request.baseURL + "/list/importSampleCount"
      },
      fapkList: [
        { name: '91传媒', pkgName: 'tneh8.mg5by.vzyq1',  type: '涉黄' },
        { name: '利得协会', pkgName: 'com.vchsb.wkkfb',  type: '涉诈' },
        { name: 'visible angle', pkgName: 'EWI.PFDExtAdzDDM.HDkvyc',  type: '涉诈' },
        { name: '华融', pkgName: 'uni.sxfjvo.mfufuafc',  type: '涉诈' },
        { name: 'shop tk', pkgName: 'org.com0818V1533.a15rtyttfyvg534',  type: '涉诈' },
        { name: '交投协办.', pkgName: 'com.gxsix.nkgjx',  type: '涉诈' },
        { name: '西蓝花.', pkgName: 'biz.g9sfduyfdsa80f.ckfasuit65',  type: '涉黄' },
        { name: '同泰协会.', pkgName: 'com.lklba.unwoa',  type: '涉诈' },
        { name: '银联会议.', pkgName: 'h4osx.wsfrv.cpcnl',  type: '涉诈' },
        { name: '源阖咨询.', pkgName: 'com.wnlct.blnpd',  type: '涉诈' },
        { name: '91传媒', pkgName: 'tneh8.mg5by.vzyq1',  type: '涉黄' },
        { name: '利得协会', pkgName: 'com.vchsb.wkkfb',  type: '涉诈' },
        { name: 'visible angle', pkgName: 'EWI.PFDExtAdzDDM.HDkvyc',  type: '涉诈' },
        { name: '华融', pkgName: 'uni.sxfjvo.mfufuafc',  type: '涉诈' },
        { name: 'shop tk', pkgName: 'org.com0818V1533.a15rtyttfyvg534',  type: '涉诈' },
        { name: '交投协办.', pkgName: 'com.gxsix.nkgjx',  type: '涉诈' },
        { name: '西蓝花.', pkgName: 'biz.g9sfduyfdsa80f.ckfasuit65',  type: '涉黄' },
        { name: '同泰协会.', pkgName: 'com.lklba.unwoa',  type: '涉诈' },
        { name: '银联会议.', pkgName: 'h4osx.wsfrv.cpcnl',  type: '涉诈' },
        { name: '源阖咨询.', pkgName: 'com.wnlct.blnpd',  type: '涉诈' }
      ],
      urlList: [
        { domain: 'ah838.top', ip: '154.86.31.87', region: '中国 香港', },
        { domain: 'Xqian.gz.ssfkskhaxd.com', ip: '119.91.228.24', region: '中国 广东 广州'},
        { domain: 'Dt96.qeaqqfh.top', ip: '101.33.251.132', region: '中国 广东 广州' },
        { domain: '5xk7.cc', ip: '172.233.130.182', region: '美国 加利福尼亚 洛杉矶' },
        { domain: '7kx7.cc', ip: '172.233.130.182', region: '美国 加利福尼亚 洛杉矶' },
        { domain: 'mql.eipoxzop.xyz', ip: '8.210.112.236', region: '中国 香港' },
        { domain: '2enat.golxf001.vip', ip: '18.162.168.83', region: '中国 香港' },
        { domain: 'wcth0312.pg668top163.top', ip: '84.17.37.42', region: '中国 香港' },
        { domain: 'jdg.trupthiox.xyz', ip: '8.210.112.236', region: '中国 香港' },
        { domain: 'ah838.top', ip: '154.86.31.87', region: '中国 香港', },
        { domain: 'Xqian.gz.ssfkskhaxd.com', ip: '119.91.228.24', region: '中国 广东 广州'},
        { domain: 'Dt96.qeaqqfh.top', ip: '101.33.251.132', region: '中国 广东 广州' },
        { domain: '5xk7.cc', ip: '172.233.130.182', region: '美国 加利福尼亚 洛杉矶' },
        { domain: '7kx7.cc', ip: '172.233.130.182', region: '美国 加利福尼亚 洛杉矶' },
        { domain: 'mql.eipoxzop.xyz', ip: '8.210.112.236', region: '中国 香港' },
        { domain: '2enat.golxf001.vip', ip: '18.162.168.83', region: '中国 香港' },
        { domain: 'wcth0312.pg668top163.top', ip: '84.17.37.42', region: '中国 香港' },
        { domain: 'jdg.trupthiox.xyz', ip: '8.210.112.236', region: '中国 香港' }
      ],
      effectList: [
        { domain: 'jdg.trupthiox.xyz', count: 156, region: '中国 香港' },
        { domain: '7kx7.cc', count: 89, region: '美国 加利福尼亚 洛杉矶' },
        { domain: 'mql.eipoxzop.xyz', count: 234, region: '中国 香港'},
        { domain: 'Dt96.qeaqqfh.top', count: 156, region: '中国 广东 广州' },
        { domain: '5xk7.cc', count: 82, region: '美国 加利福尼亚 洛杉矶' },
        { domain: 'wcth0312.pg668top163.top', count: 54, region: '中国 香港' },
        { domain: 'ah838.top', count: 185, region: '中国 香港' },
        { domain: '2enat.golxf001.vip', count: 269, region: '中国 香港' },
      ],
      // 新增数据（替换原urlList）
      municipalData: [
        { original_count: 0, data_source: "恒安嘉新" },
        { original_count: 0, data_source: "分局_普陀" },
        { original_count: 0, data_source: "研判_笔录" },
        { original_count: 0, data_source: "金护" },
        { original_count: 0, data_source: "三方通话" },
        { original_count: 0, data_source: "非接现勘" },
        { original_count: 0, data_source: "接报快处" },
        { original_count: 0, data_source: "研判录入" }
      ],
      certData: {
        original_count: 0,
        cover_count: 0,
        add_count: 0,
        live_count: 0
      },
      isScreen1920: window.innerWidth <= 1920,
    };
  },
  mounted() {
    this.initPieChart();
    this.initLineChart();
    this.initBarChart();
    this.init24HBarChart();
    // 新增CERT图表初始化
    // this.initCertChart();
    this.getMunicipalCountList();
    this.getSampleCountListHandle();
  },
  methods: {
    getMunicipalCountList (){
      const startDate = this.municipalDate.length ? this.municipalDate[0] : moment().subtract(9, 'days').format('yyyy-MM-DD 00:00:00'); // 10天包含首尾
      const endDate = this.municipalDate.length ? this.municipalDate[1] : moment().format('yyyy-MM-DD 23:59:59');
      API.getSampleCountList({
        startDate,
        endDate,
        type: "市局"
      }).then(res=>{
        this.municipalData = res.content
      })
    },
    getSampleCountListHandle () {
      const startDate = this.certDate.length ? this.certDate[0] :  moment().subtract(9, 'days').format('yyyy-MM-DD 00:00:00'); // 10天包含首尾
      const endDate = this.certDate.length ? this.certDate[1] :  moment().format('yyyy-MM-DD 23:59:59');
      API.getSampleCountList({
        startDate,
        endDate,
        type: "cert"
      }).then(res=>{
        this.certData = res.content[0] || {}
        this.initCertChart()
      })
    },
    handleSHGAFileUploadProgress(event, file, fileList) {
      this.SHGAupload.isUploading = true;
    },
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleSHGAFileSuccess(response, file, fileList) {
      this.SHGAupload.open = false;
      this.SHGAupload.isUploading = false;
      this.$refs.SHGAuploadRef.clearFiles();
      this.$alert("导入成功");
      location.reload()
      // this.$refs.case_tableForm.getTableData()
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("导入成功");
      location.reload()
      // this.$refs.case_tableForm.getTableData()
    },
    // 新增方法
    calculatePercentage(value, total) {
      return ((value / total) * 100).toFixed(1);
    },
    initCertChart() {
      if (this.certChart) {
        this.certChart.dispose()
      }
      this.certChart = echarts.init(this.$refs.certChart);
      this.certChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          itemStyle: {
            borderRadius: 10,
            borderColor: '#001529',
            borderWidth: 2
          },
          data: [
            { value: this.certData.cover_count, name: '覆盖数量', itemStyle: { color: '#73DDFF' } },
            { value: this.certData.add_count, name: '新增数量', itemStyle: { color: '#73ACFF' } },
            { value: this.certData.live_count, name: '存活数量', itemStyle: { color: '#FDD56A' } },
            { value: this.certData.original_count, name: '原始数量', itemStyle: { color: '#FDB36A' } }
          ]
        }]
      });
    },
    initPieChart() {
      const pieChart = echarts.init(this.$refs.pieChart);
      var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']
      pieChart.setOption({
        title: {
          // text: 'pieChart',
          x: 'center',
          y: 'center',
          textStyle: {
            fontSize: this.isScreen1920 ? 18 : 50
          }
        },
        legend: {
          data: [
            '恶意程序',
            '网络攻击',
            '信息窃取',
            '钓鱼诈骗',
            '其他威胁'
          ],
          left: "5%",
          textStyle: {
            color: "rgba(250,250,250,0.6)",
            fontSize: this.isScreen1920 ? 18 : 50
          }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [{
          type: 'pie',
          center: this.isScreen1920 ? ['50%', '60%'] : ['50%', '50%'],
          radius: ['54%', '75%'],
          clockwise: true,
          avoidLabelOverlap: true,
          hoverOffset: 15,
          itemStyle: {
            normal: {
              color: function(params) {
                return colorList[params.dataIndex]
              }
            }
          },
          label: {
            show: false,
            position: 'outside',
            // formatter: '{a|{b}：{d}%}\n{hr|}',
            formatter: function(params) {
              // 使用 \n 实现换行
              return `${params.name}\n${params.percent}%`;
            },

            rich: {
              hr: {
                backgroundColor: 't',
                borderRadius: 3,
                width: 3,
                height: 3,
                padding: [3, 3, 0, -12]
              },
              a: {
                padding: [-30, 15, -20, 15]
              }
            }
          },
          labelLine: {
            normal: {
              length: 20,
              length2: 30,
              lineStyle: {
                width: 1
              }
            }
          },
          data: [
            { value: 1048, name: '恶意程序' },
            { value: 735, name: '网络攻击' },
            { value: 580, name: '信息窃取' },
            { value: 484, name: '钓鱼诈骗' },
            { value: 300, name: '其他威胁' }
          ]
        }]
      });
    },
    initLineChart() {
      const lineChart = echarts.init(this.$refs.lineChart);
      lineChart.setOption({
        animation: false,
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLine: { lineStyle: { color: '#fff' } },
          axisLabel: {
            fontSize: this.isScreen1920 ? 18 : 50,
            color: '#fff'
          },

        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#fff' } },
          axisLabel: {
            fontSize: this.isScreen1920 ? 14 : 30,
            color: '#fff'
          },

        },
        series: [{
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line',
          smooth: true,
          lineStyle: {
            color: '#0088D4' // 设置线条颜色为蓝色
          },

          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(0, 136, 212, 0.8)'
            }, {
              offset: 1,
              color: 'rgba(0, 136, 212, 0.1)'
            }])
          }
        }]
      });
    },
    initBarChart() {
      const barChart = echarts.init(this.$refs.barChart);
      barChart.setOption({
        animation: false,
        grid: {
          top: 10,          // 上边距
          right: 0,        // 右边距
          bottom: 0,      // 下边距（为图例留空间）
          left: 0,         // 左边距
          containLabel: true // 确保坐标轴标签在grid内
        },

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
          axisLine: { lineStyle: { color: '#fff' } },
          axisLabel: {
            fontSize: this.isScreen1920 ? 14 : 30,
            color: '#fff'
          },

        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#fff' } },
          axisLabel: {
            fontSize: this.isScreen1920 ? 16 :50,
            color: '#fff'
          },

        },
        series: [{
          data: [120, 200, 150, 80, 70, 110],
          type: 'bar',
          showBackground: true,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#83bff6'
            }, {
              offset: 0.5,
              color: '#188df0'
            }, {
              offset: 1,
              color: '#188df0'
            }])
          }
        }]
      });
    },
    init24HBarChart() {
      const barChart = echarts.init(this.$refs.bar24HChart);

      // 数据定义
      var legendData = ['虚假代办', '冒充熟人', '电话诈骗', '刷单诈骗', '虚假贷款'];
      var x_data = []; // 时间维度，最近 6 小时
      var currentTime = new Date();
      for (let i = 5; i >= 0; i--) {
        var time = new Date(currentTime.getTime() - i * 60 * 60 * 1000);
        x_data.push(time.getHours() + ':00');
      }

      // 每种诈骗类型的数量（随机生成 10-20 之间的数据）
      var _data1 = [];
      var _data2 = [];
      var _data3 = [];
      var _data4 = [];
      var _data5 = [];
      for (let i = 0; i < 6; i++) {
        _data1.push(Math.floor(Math.random() * 11) + 10); // 虚假代办
        _data2.push(Math.floor(Math.random() * 11) + 10); // 冒充熟人
        _data3.push(Math.floor(Math.random() * 11) + 10); // 电话诈骗
        _data4.push(Math.floor(Math.random() * 11) + 10); // 刷单诈骗
        _data5.push(Math.floor(Math.random() * 11) + 10); // 虚假贷款
      }

      // 配置项
      barChart.setOption({
        grid: {
          top: 10,          // 上边距
          right: 0,        // 右边距
          bottom: 45,      // 下边距（为图例留空间）
          left: 0,         // 左边距
          containLabel: true // 确保坐标轴标签在grid内
        },
        backgroundColor: 'transparent',
        legend: {
          data: legendData,
          textStyle: {
            color: '#ccc',
            fontSize: this.isScreen1920 ? 10 : 14
          },
          bottom: 0
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#fff',
          borderColor: '#ddd',
          borderWidth: 1,
          textStyle: {
            color: '#3c3c3c',
            fontSize: 14
          },
          formatter: function (p) {
            return '时间：' + p[0].name + '<br>' + '类型：' + p[0].seriesName + '<br>' + '数量：' + p[0].value;
          },
          extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)'
        },
        xAxis: {
          type: 'category',
          data: x_data,
          axisLabel: {
            fontSize: this.isScreen1920 ? 14 : 30,
            color: '#fff'
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            fontSize: this.isScreen1920 ? 14 : 30,
            color: '#fff'
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#2c3e50'
            }
          }
        },
        series: [
          {
            type: 'bar',
            name: '虚假代办',
            stack: '总量',
            barWidth: this.isScreen1920 ? 10 : 20,
            itemStyle: {
              normal: {
                color: '#7E47FF'
              }
            },
            data: _data1
          },
          {
            type: 'bar',
            name: '冒充熟人',
            stack: '总量',
            barWidth: this.isScreen1920 ? 10 : 20,
            itemStyle: {
              normal: {
                color: '#FD5916'
              }
            },
            data: _data2
          },
          {
            type: 'bar',
            name: '电话诈骗',
            stack: '总量',
            barWidth: this.isScreen1920 ? 10 : 20,
            itemStyle: {
              normal: {
                color: '#01A4F7'
              }
            },
            data: _data3
          },
          {
            type: 'bar',
            name: '刷单诈骗',
            stack: '总量',
            barWidth: this.isScreen1920 ? 10 : 20,
            itemStyle: {
              normal: {
                color: '#2EDDCD'
              }
            },
            data: _data4
          },
          {
            type: 'bar',
            name: '虚假贷款',
            stack: '总量',
            barWidth: this.isScreen1920 ? 10 : 20,
            itemStyle: {
              normal: {
                color: '#FFD700'
              }
            },
            data: _data5
          }
        ]
      });
    }
  }
};
</script>
<style scoped lang="stylus">
div{
  box-sizing: border-box;
}
.container {
  height: 100%;
  background-color: #001529;
  color: #fff;
}

.wrapper {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.title {
  font-size: 80px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
  height: 180px;
  background-image: url("../../assets/img/riskSourceStationAnalysis/headerBg.png");
  background-size: 100% 100%;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  height: calc(100% - 180px);

}

.left-column,
.middle-column,
.right-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
}
.left-column{
  .card{
    height: 50%
  }
}
.middle-column{
  .card{
    height: 50%
  }
}
.right-column{
  .card{
    height: 33.33%;
  }
}
.card {
  background-color: #00213c;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #0a4b6e;
}
.card-title {
  font-size: 35px;
  font-weight: 500;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #d2f9ff 0%, #06D9FF 50%, #06D9FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  &.big-title{
    transform: scale(1.2);
    transform-origin: left center;
    font-weight: bold;
  }
}

.icon {
  margin-right: 8px;
}

.chart {
  width: 100%;
  height: calc(100% - 50px);
}
.custom-table {
  //display: block;
  border-collapse: collapse;
  width: 100%;
  height: calc(100% - 80px);
  table-layout: fixed; /* 重要：固定表格布局 */
  overflow-x: auto; // 添加水平滚动
  scrollbar-width: thin;
  scrollbar-color: #06CEF9 rgba(10, 75, 110, 0.2);

  &::-webkit-scrollbar-track {
    background: rgba(10, 75, 110, 0.1);
  }

  // 保持表头为表格布局
  thead {
    display: table;
    width: 100%;
  }
  th{
    position: sticky;
    top: 0;
    background-color: rgba(10, 75, 110, 0.3);
    z-index: 10;
  }
  // tbody 可滚动区域
  tbody {
    display: block;
    height: calc(100% - 80px); // 减去表头高度
    overflow-x: hidden;
    overflow-y: auto;
    // 保持行与表头对齐
    tr {
      display: table;
      width: 100%;
      table-layout: fixed;
      background-color: rgba(10, 75, 110, 0.3);
      color: #06CEF9;
    }
  }

}

.custom-table th,
.custom-table td {
  border: 1px solid #0a4b6e;
  padding: 20px;
  text-align: left;
  color: #fff;
  font-size: 30px;
  word-break: break-all;
}

.custom-table tr:hover {
  background-color: rgba(10, 75, 110, 0.2);
}
.custom-table tr:nth-child(even) {
  background: linear-gradient(90deg, rgb(38, 84, 123), rgba(255, 255, 255, 0.04));
}

.middle-column .card,
.right-column .card:first-child {
  //height: 350px;
}
@media screen and (max-width: 1920px) {
  .title {
    font-size: 28px;
    height: 40px;
  }
  .card-title{
    font-size: 16px;
  }
  //th{
  //    font-size: 14px !important;
  //}
  .custom-table {
    tbody{
      height: calc(100% - 00px); // 减去表头高度
    }
  }
  .custom-table th,
  .custom-table td {
    padding: 10px;
    font-size: 14px;
  }
  .grid{
    height: calc(100% - 40px);
    gap: 10px;
  }
  .left-column,
  .middle-column,
  .right-column {
    gap: 10px;
  }
  /* 仅新增以下样式 */
  .municipal-stats {
    height: calc(100% - 60px);
    overflow-y: auto;
    padding-right: 8px;
    .stat-item {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      padding: 10px;
      background: rgba(10, 75, 110, 0.2);
      border-radius: 6px;
      &:hover {
        background: rgba(10, 75, 110, 0.4);
      }
      .stat-source {
        width: 140px;
        font-size: 16px;
        color: #06CEF9;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .stat-count {
        width: 100px;
        text-align: right;
        font-family: monospace;
        font-size: 16px;
        color: #fff;
      }
      .stat-progress {
        flex: 1;
        height: 12px;
        margin-left: 15px;
        background: rgba(10, 75, 110, 0.5);
        border-radius: 6px;
        overflow: hidden;
        .progress-bar {
          height: 100%;
          background: linear-gradient(90deg, #06D9FF, #7E47FF);
          border-radius: 6px;
          transition: width 0.3s ease;
        }
      }
    }
  }

  .cert-stats {
    height: calc(100% - 60px);
    display: flex;
    flex-direction: column;
    .stat-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-bottom: 15px;
      .stat-item {
        padding: 10px;
        background: rgba(10, 75, 110, 0.2);
        border-radius: 6px;
        .stat-label {
          display: block;
          font-size: 14px;
          color: #06CEF9;
          margin-bottom: 5px;
        }
        .stat-value {
          display: block;
          font-size: 18px;
          font-weight: bold;
          color: #fff;
        }
      }
    }
    .chart {
      flex: 1;
      margin-top: 0;
    }
  }

  @media screen and (max-width: 1920px) {
    .title {
      font-size: 28px;
      height: 40px;
    }

    .card-title {
      font-size: 16px;
    }

    .custom-table th,
    .custom-table td {
      padding: 10px;
      font-size: 14px;
    }

    .grid {
      height: calc(100% - 40px);
      gap: 10px;
    }

    .left-column,
    .middle-column,
    .right-column {
      gap: 10px;
    }

    /* 小屏幕适配 */
    .municipal-stats {
      .stat-item {
        padding: 8px;

        .stat-source {
          width: 100px;
          font-size: 12px;
        }

        .stat-count {
          width: 70px;
          font-size: 12px;
        }

        .stat-progress {
          margin-left: 10px;
          height: 8px;
        }
      }
    }

    .cert-stats {
      .stat-grid {
        gap: 8px;

        .stat-item {
          padding: 6px;

          .stat-label {
            font-size: 12px;
          }

          .stat-value {
            font-size: 14px;
          }
        }
      }
    }
  }
}

</style>
